<template>
  <div class="myFriend" :class="friendList&&friendList.length==0?'noData':''">
    <div class="headerBox">
      <van-nav-bar
        title="我的好友"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
    </div>
    <div v-if="this.friendList&&this.friendList.length>0">
      <div class="head_box">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option" />
        </van-dropdown-menu>
        <span style="margin-right: 0.28rem;">{{friendList.length}}人</span>
      </div>
      <div class="coment_box">
        <div class="info_box" v-for="(item,index) in friendList" :key="index">
          <img src="../../assets/img/user/headImg.png" alt="">
          <div class="name">
            <span>{{item.username}}</span>
            <!-- <i class="grade"></i> -->
          </div>
          <span>{{setIphone(item.tel)}}</span>
        </div>
      </div>
    </div>
    <div class="noWallet" v-if="this.friendList&&this.friendList.length==0&&onload">
      <img src="../../assets/img/user/img_wuhaoyou.png" alt="">
      <p>您还没有好友呢</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      option: [
        { text: '全部人数', value: 0 },
        // { text: 'A级代理商', value: 1 },
        // { text: 'B级代理商', value: 2 },
      ],
      onload:false,
      value1: 0,
      friendList: []
    };
  },
  created() {
    this.getUserForRecom()
  },
  methods:{
    async getUserForRecom(){
      this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
      });
      let res = await this.$http.getUserForRecom({
        page: 1,
        pageSize: 50
      })
      if(res){
        this.friendList = res.data.list
        this.$toast.clear()
        this.onload=true
      } else {
        this.$toast.clear()
      }
    },
    setIphone(tel) {
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      return tel.replace(reg, "$1****$2")
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
.head_box{
  width: 100%;
  height: .8rem;
  line-height: .8rem;
  background: #00C8E7;
  font-size: .29rem;
  color: #fff;
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.info_box{
  width: 100%;
  height: 1.08rem;
  display: flex;
  justify-content:space-between;
  align-items: center;
  background: #fff;
  border-bottom: .02rem solid #F5F3F3;
  padding: .22rem .3rem;
}
.info_box img{
  width: .64rem;
  height: .64rem;
  border-radius: 50%;
}
.info_box .name{
  width: 4.2rem;
  font-size: .3rem;
  color: #333;
  font-weight: 600;
}
.info_box .name > i{
  display: inline-block;

}
.info_box .name .grade{
  display: inline-block;
  width: 1.64rem;
  height: .36rem;
  background: url('../../assets/img/user/icon_a.png')no-repeat;
  background-size: 100% 100%;
  margin-left: .1rem;
  position: relative;
  top: .08rem;
}
.noData{
  height: 100vh;
  background: #FFF;
}
.noWallet{
  text-align: center;
  font-size: 0.32rem;
  color: #999;
}
.noWallet img{
  width: 100%;
  margin-top: 2rem;
}
</style>
